<!--  -->
<template>
	<view class="sys_diagnos">
		<view class="box-bg">
			<view class="info">
				<view class="">姓名<text>*</text></view>
				<input type="text" placeholder="请输入姓名" v-model="form.caseUname" />
			</view>
			<view class="info">
				<view class="">性别<text>*</text></view>
				<view class="uni-list-cell-db-sex" @click="changeSex()">
					<view v-if="form.sex == ''" class="">
						请选择性别
					</view>
					<view v-else class="">{{form.sex}}</view>
					<image src="@/static/icons/aa11.png" mode=""></image>
				</view>
			</view>
			<view class="info">
				<view class="">年龄</view>
				<input type="text" placeholder="请填写您的年龄" v-model="form.caseUage" />
			</view>
			<view class="info">
				<view class="">电话<text>*</text></view>
				<input type="text" maxlength="11" placeholder="请填写您的电话" v-model="form.casePhone" />
			</view>
		</view>
		<!--  -->
		<view class="box-bg" style="padding-bottom: 20rpx;">
			<view class="remark">疤痕说明</view>
			<textarea maxlength="300" v-model="form.caseText" placeholder="请简单填写您的情况"></textarea>
		</view>

		<!-- 人体图 -->
		<!-- <view class="box" v-for="(isSelected,index) in views" :key="index" @click="boxClick(index)"
			:class="['item', isSelected ? 'active' : 'default']"></view> -->
		<view class="people">
			<view class="selBox" @click="selFice">
				<image src="@/static/icons/aa20.png" mode=""></image>
				<text v-if="form.face == 0">反面</text>
				<text v-if="form.face == 1">正面</text>
			</view>
			<view class="box" v-for="(isSelected,index) in views" :key="index" @click="boxClick(index)"
				:class="['item-view', { 'active': form.selectedIndex === index }]"></view>
			<image v-if="form.face == 0 && form.sex == '男'" class="psores" src="https://xwh.cmxz.com.cn/prod-api/profile/upload/bg/aaa0.png" mode=""></image>
			<image v-if="form.face == 1 && form.sex == '男'" class="psores" src="https://xwh.cmxz.com.cn/prod-api/profile/upload/bg/aaa1.png" mode=""></image>
			<image v-if="form.face == 0 && form.sex == '女'" class="psoresWon" src="https://xwh.cmxz.com.cn/prod-api/profile/upload/bg/bbb0.png" mode=""></image>
			<image v-if="form.face == 1 && form.sex == '女'" class="psoresWon" src="https://xwh.cmxz.com.cn/prod-api/profile/upload/bg/bbb1.png" mode=""></image>
		</view>
		<view class="resen">点击上方图示位置，选择需要治疗的位置</view>
		
		<view class="btnAdd">
			<view class="a1" @click="submitBtn" v-if="isShow == true">提交</view>
			<view class="a2" v-if="isShow == false">提交</view>
		</view>
		
		<view class="SelsexBox" v-if="isSexShow">
			<view class="pro">
				<view class="pros">
					<view @click="selAdd(item)" class="items" v-for="(item,index) in deptlist" :key="index">
						{{item.name}}
					</view>
					<view style="margin-top: 16rpx;" @click="selErr(item)" class="items">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {caseAdd,caseDet,caseEdit} from '@/api/pagesApi/index.js'
	export default {
		data() {
			return {
				form: {
					caseUname:'',
					sex: '男',
					face:0,//0是正，1是反
					casePhone:'',
					caseUage:'',
					caseText:'',
					// selectedIndices:[],//所有选中的下标
					selectedIndex: null, // 当前选中的索引
				},
				deptlist: [{
						id: 1,
						name: '男'
					},
					{
						id: 2,
						name: '女'
					},
				],

				// views: Array(60).fill(false), // 初始化 60 个 view，默认颜色为 "default"
				views: Array.from({ length: 60 }, (_, i) => ({ text: `Item ${i + 1}` })),
				
				isShow:false,//
				
				isSexShow:false,
			}
		},
		watch:{
			form:{
				handler(newVal) {
				    // 判断 age 和 phone 是否都不为空
					this.isShow = newVal.caseUname.trim() !== "" && newVal.casePhone.trim() !== "";
				},
				deep: true // 深度监听对象内部属性的变化
			}
		},
		onShow() {
			if(wx.getStorageSync('wzCaseChannelUUid')){
				this.form.caseChannelUUid = wx.getStorageSync('wzCaseChannelUUid')
			}
		},
		onLoad(opt) {
			if(opt.id){
				caseDet({caseId:opt.id}).then(res=>{
					console.log(res)
					// this.form = res.data.data
					this.form.caseUname = res.data.data.caseUname
					this.form.casePhone = res.data.data.casePhone
					this.form.caseUage = res.data.data.caseUage
					this.form.caseText = res.data.data.caseText
					this.form.caseId = res.data.data.caseId
					this.form.caseUsex = res.data.data.caseUsex
					if(this.form.caseUsex == 1){
						this.form.sex = '男'
					}else{
						this.form.sex = '女'
					}
					if(res.data.data.caseFrontpoint){
						this.form.face = 0
						this.form.selectedIndex = res.data.data.caseFrontpoint - 1
					}
					if(res.data.data.caseBackpoint){
						this.form.face = 1
						this.form.selectedIndex = res.data.data.caseBackpoint - 1
					}
					
					console.log(this.form.selectedIndex)
					
				})
			}
		},
		methods: {
			submitBtn(){
				console.log(this.form)
				this.form.caseOpenid = wx.getStorageSync('wzOpenid')
				// this.form.caseChannelUUid = wx.getStorageSync('wzUid')
				if(this.form.face == 0){
					this.form.caseFrontpoint = this.form.selectedIndex + 1
					this.form.caseBackpoint = null
				}else{
					this.form.caseBackpoint = this.form.selectedIndex + 1
					this.form.caseFrontpoint = null
				}
				if(this.form.sex == "男"){
					this.form.caseUsex = 1
				}else{
					this.form.caseUsex = 2
				}
				if(this.form.caseId){ //修改
					caseEdit(this.form).then(res=>{
						console.log(res)
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
						if(res.data.code == 200){
							setTimeout(function(){
								uni.redirectTo({
									url:'./case/treatment'
								})
							},1500)
						}
					})
				}else{
					caseAdd(this.form).then(res=>{
						console.log(res)
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
						if(res.data.code == 200){
							setTimeout(function(){
								uni.redirectTo({
									url:'./case/myCase',
								})
							},1500)
						}
					})
				}
			},
			//性别选择
			changeSex() {
				this.isSexShow = true
			},

			//选择男女
			selAdd(i) {
				console.log(i)
				this.form.sex = i.name
				this.form.caseUsex = i.id
				this.isSexShow = false
			},

			selErr() {
				// this.form.sex = ''
				// this.form.caseUsex = null
				this.isSexShow = false
			},

			boxClick(index) {
				this.form.selectedIndex = index
			},
			
			selFice(){
				// this.form.selectedIndices = []
				this.isShow = false
				if(this.form.face == 0){
					this.form.face = 1
					return
				}
				if(this.form.face == 1){
					this.form.face = 0
					return
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.sys_diagnos {
		width: calc(100% - 0rpx);
		min-height: calc(100vh - 60rpx);
		padding: 20rpx 0rpx 40rpx;
		background-color: #FAFAFA;
		font-size: 32rpx;
		color: #333;

		.box-bg {
			width: calc(100% - 80rpx);
			padding: 0 40rpx;
			background-color: #fff;

			input,
			textarea {
				font-size: 28rpx;
			}

			.info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				font-weight: normal;
				border-bottom: 1rpx solid #F5F5F5;

				text {
					color: red;
					margin-left: 10rpx;
					font-size: 32rpx;
					font-weight: 700;
				}

				input {
					text-align: right;
				}
			}

			.remark {
				margin-top: 20rpx;
				padding: 20rpx 0;
				font-weight: normal;
			}

			textarea {
				width: 100%;
				height: 160rpx;
			}
		}
	}

	.uni-list-cell-db-sex {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		view {
			margin-right: 20rpx;
		}

		image {
			width: 15rpx;
			height: 20rpx;
		}
	}

	.pro {
		width: calc(100vw - 0rpx);
		background-color: #FAFAFA;
		position: relative;
		z-index: 9999 !important;
		.pros {
			width: 100%;
			overflow-y: auto;

			.items {
				width: 100%;
				height: 100rpx;
				background: #fff;
				justify-content: space-between;
				border-bottom: 1rpx solid #E7E7E7;
				text-align: center;
				line-height: 100rpx;
			}

		}
	}
	.SelsexBox{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999999;
		.pro {
			width: calc(100vw - 0rpx);
			background-color: #FAFAFA;
			position: relative;
			.pros {
				width: 100%;
				overflow-y: auto;
		
				.items {
					width: 100%;
					height: 100rpx;
					background: #fff;
					justify-content: space-between;
					border-bottom: 1rpx solid #E7E7E7;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}
	}

	.people {
		width: calc(100% - 92rpx);
		height: 1414rpx;
		margin: 80rpx auto 0;
		// padding: 0 46rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		.selBox{
			background: linear-gradient(180deg, #5AD2C9 0%, #16D7A8 100%);
			position: absolute;
			left: 0px;
			top: 0px;
			width: 90px;
			height: 30px;
			border-radius: 14px;
			opacity: 1;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			image{
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.psores{
			position: absolute;
			top: 0;
			left: 20%;
			width: 60%;
			height: 1414rpx;
			z-index: 0;
		}
		.psoresWon{
			position: absolute;
			top: 0;
			left: 0%;
			width: 100%;
			height: 1414rpx;
			z-index: 0;
		}
	}
	.resen{
		width: 100%;
		text-align: center;
		color: red;
		margin-top: 20rpx;
		font-size: 32rpx;
	}

	.box {
		width: calc(20% - 8rpx);
		height: 114rpx;
		border-left: 4rpx dashed rgba(72, 194, 185, 0.4);
		border-bottom: 4rpx dashed rgba(72, 194, 185, 0.4);
		// box-sizing: border-box;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
		opacity: 0.6;
	}

	.box:nth-child(5n+1) {
		border-right: 4rpx dashed rgba(72, 194, 185, 0.4);
		border-left: 4rpx dashed rgba(72, 194, 185, 0.4);
	}

	// .box:nth-child(5n + 1) {
	// 	border-left: 4rpx dashed rgba(72, 194, 185, 0.4);
	// }

	.box:nth-child(6),
	.box:nth-child(2),
	.box:nth-child(3),
	.box:nth-child(4),
	.box:nth-child(5) {
		border-top: 4rpx dashed rgba(72, 194, 185, 0.4);
	}

	.box-active {
		background: rgba(72, 194, 185, 0.4487);
	}

	/* 默认颜色样式 */
	.default {
		background-color: #FAFAFA;
	}

	/* 点击后的颜色样式 */
	.active {
		background-color: #48C2B9;
	}
	
	
	
	.btnAdd{
		margin-top: 40rpx;
		width: 100%;
		background-color: #fff;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		.a1{
			width: 90%;
			background: linear-gradient(180deg, #5AD2C9 0%, #16D7A8 100%);
			border-radius: 16rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
		}
		.a2{
			width: 90%;
			background: linear-gradient(180deg, rgba(90, 210, 201, 0.4) 0%, rgba(22, 215, 168, 0.4) 100%);
			border-radius: 16rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
		}
	}
</style>